<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../x-meta/x-meta.html">
<link rel="import" href="property-inspector.html">

<script src="reflection.js"></script>


<polymer-element name="object-inspector" vertical layout attributes="selected dirty nobind">
<template>
  <style>
    property-inspector {
      padding: 4px;
      box-sizing: border-box;
    }
  </style>
  <div>
    <template repeat="{{property in properties}}">
      <property-inspector property="{{property}}" hidden?="{{property.meta.hidden}}" nobind="{{nobind}}"></property-inspector>
    </template>
  </div>
  <x-meta id="meta"></x-meta>

</template>
<script>

Polymer({
  
  selected: null,
  properties: null,

  observe: {
    'selected dirty': 'update'
  },

  update: function() {
    // meta-data attached here
    if (this.selected) {
      if (this.selected._getInspectorProps) {
        var p$ = this.selected._getInspectorProps();
        this.properties = Reflection.objectProperties(p$);
      } else {
       this.properties = Reflection.properties(this.selected);
      }
    } else {
      this.properties = [];
    }
  }

});

</script>

</polymer-element>
